<template>
  <s-layout title="任务企业列表">
    <view class="container">
      <!-- 添加搜索框 -->
      <view class="search-box">
        <fui-icon name="search" :size="28" color="#999"></fui-icon>
        <input
          v-model="searchText"
          placeholder="搜索企业名称"
          class="search-input"
          @input="handleSearch"
        />
      </view>

      <view class="enterprise-list">
        <view 
          v-for="enterprise in filteredEnterprises" 
          :key="enterprise.id" 
          class="enterprise-item"
          @click="navigateToEnterpriseDetail(enterprise)"
        >
          <image class="enterprise-logo" :src="enterprise.avatar" mode="aspectFill" />
          <view class="enterprise-info">
            <text class="enterprise-name">{{ enterprise.name }}</text>
            <view class="info-item">
              <fui-icon name="location" :size="28" color="#666"></fui-icon>
              <text class="enterprise-address">{{ enterprise.address }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import sheep from "@/sheep";

// 更新企业数据
const enterprises = ref([
  {
    id: 1,
    name: "杭州阿里巴巴",
    address: "浙江省杭州市滨江区网商路699号",
    avatar: "https://tse4-mm.cn.bing.net/th/id/OIP-C.NcdcqqpNWGnIsAobgsawawHaHa?rs=1&pid=ImgDetMain",
  },
  {
    id: 2,
    name: "腾讯科技",
    address: "广东省深圳市南山区科技园",
    avatar: "https://tse2-mm.cn.bing.net/th/id/OIP-C.7w9xu18CVqCjpWuYIi2ZhwHaFj?rs=1&pid=ImgDetMain",
  },
  {
    id: 3,
    name: "百度在线",
    address: "北京市海淀区上地十街10号",
    avatar: "https://ts1.tc.mm.bing.net/th/id/R-C.5cd0ec097c890b656e759e6a425bfa45?rik=3tRVd7dlyM%2bx%2fw&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f10%2f46%2fPqmDFNEX6p.jpg&ehk=QrHwvZL%2fQGOvakWp%2fR%2bvZwQI1VDJyCKsOmbizZBb2eA%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1",
  },
  {
    id: 4,
    name: "华为技术",
    address: "广东省深圳市龙岗区坂田华为基地",
    avatar: "https://tse3-mm.cn.bing.net/th/id/OIP-C.Mtk-KGgEGN15nbyQm26zIwHaEK?rs=1&pid=ImgDetMain",
  },
  {
    id: 5,
    name: "字节跳动",
    address: "北京市海淀区知春路甲48号",
    avatar: "https://logo800.cn/uploads/logoxinshang/56/logo800_16491624083325586.png",
  },
  {
    id: 6,
    name: "字节跳动",
    address: "北京市海淀区知春路甲48号",
    avatar: "https://logo800.cn/uploads/logoxinshang/56/logo800_16491624083325586.png",
  },
  {
    id: 7,
    name: "字节跳动",
    address: "北京市海淀区知春路甲48号",
    avatar: "https://logo800.cn/uploads/logoxinshang/56/logo800_16491624083325586.png",
  },
  {
    id: 8,
    name: "字节跳动",
    address: "北京市海淀区知春路甲48号",
    avatar: "https://logo800.cn/uploads/logoxinshang/56/logo800_16491624083325586.png",
  }

]);

const searchText = ref('');
// 新增响应式变量存储t_id
const t_id = ref('');

onLoad((options) => {
  t_id.value = options.t_id; // 存储到响应式变量
  
  const params = {
    dept_user_id: sheep.$store("user").userInfo.people_id,
    task_id: t_id.value // 使用响应式变量
  };

  uni.showLoading({ title: '加载中...' });
  
  // 发起API请求
  sheep.$api.xf_index.getTaskManyUnityList(params).then(res => {

    if (res.code === 200) {
      enterprises.value = res.taskCompanyList.map(item => ({
        id: item.c_id,
        name: item.c_name,
        address: item.com_address || item.c_address,
        avatar: item.c_image
      }));
    }
  }).catch(err => {
    uni.showToast({ title: '数据加载失败', icon: 'none' });
  }).finally(() => {
    uni.hideLoading();
  });
})
// 添加搜索功能
const filteredEnterprises = computed(() => {
  return enterprises.value.filter(enterprise => 
    enterprise.name.toLowerCase().includes(searchText.value.toLowerCase())
  );
});

const navigateToEnterpriseDetail = (enterprise) => {
  uni.navigateTo({
    // 使用响应式变量t_id.value
    url: `/pages/xf/qydetails/qytail?company_id=${enterprise.id}&task_id=${t_id.value}`
  });
};

const handleSearch = () => {
  // 搜索逻辑已通过计算属性实现
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f9f9f9; // 更柔和的背景色
  border-radius: 10rpx; // 圆角
}

.search-box {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 20rpx;
  padding: 10rpx 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); // 添加阴影
}

.search-input {
  flex: 1;
  margin-left: 10rpx;
  font-size: 28rpx;
  color: #333;
  border: none; // 去掉默认边框
  outline: none; // 去掉聚焦时的边框
}

.enterprise-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx; // 增加间距
}

.enterprise-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background: #fff;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  transition: transform 0.2s; // 添加过渡效果
}

.enterprise-item:hover {
  transform: scale(1.02); // 悬停时放大效果
}

.enterprise-logo {
  width: 100rpx;
  height: 100rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.enterprise-info {
  flex: 1;
}

.enterprise-name {
  font-family: 'Roboto', sans-serif; // 使用引入的字体
  font-size: 36rpx; // 增加字体大小
  font-weight: bold; // 加粗
  color: #2b85e4; // 使用更醒目的颜色
  margin-bottom: 10rpx; // 增加下边距
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); // 添加阴影效果
  padding: 5rpx; // 添加内边距
  border-radius: 5rpx; // 圆角
  background-color: rgba(255, 255, 255, 0.8); // 背景色
}

.enterprise-address {
  font-size: 28rpx;
  color: #666;
}
</style> 